<template>
	<view class="page">
		<!-- 桌位列表 -->
		<view class="dining_list p-20" v-if="diningTableList.length > 0">
			<view class="dining_item uni-bg-color-fff radius-10 p-20 vertical_view align_item_center justify_center"
				v-for="(item,index) in diningTableList" :key="index" :class="{'dining_item_active':item.status === 2}"
				@click="onMenu(item)">
				<view class="name bold font-40">
					{{item.name}}
				</view>
				<view class="status font-28 uni-text-color-999 mt-20">
					{{item.status === 1?'空闲中':'使用中'}}
				</view>
			</view>
		</view>
		<view class="p-20" v-else>
			<u-empty mode="data" icon="/static/empty_icon.png" width="100" height="100" text="暂无餐位">
			</u-empty>
			<u-button type="error" @click="onDining()" text="去添加" :customStyle="{
				width:'160rpx',
				marginTop:'20rpx',
				background:'#d81e06',
			}"></u-button>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from "vuex"
	import {
		diningTableList
	} from "@/data/data.js"
	export default {
		computed: mapState(["diningTableList"]),
		data() {
			return {

			}
		},
		methods: {
			//去点餐
			onMenu(item) {
				uni.$u.route({
					url: '/sub-packages/menu/menu',
					params: {
						id: item.id,
						diningName: item.name
					}
				})
			},
			onDining() {
				uni.navigateTo({
					url: "/sub-packages/dining-space-management/dining-space-management"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.dining_list {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-column-gap: 20rpx;
		grid-row-gap: 20rpx;

		.dining_item {
			height: 280rpx;
		}

		.dining_item_active {
			background: #d81e06;

			.name,
			.status {
				color: #fff;
			}
		}
	}
</style>